<script setup>
import { reactive } from 'vue'
import useViewEvent from '@/core/hooks/useViewEvent'
import spuApi from '@/api/goods/SpuApi'
import { NormalStateColors } from '@/core/config/ColorMap'
// TABS
const tabListNoTitle = [ { key: 'main', tab: '基本信息' }, { key: 'content', tab: '内容信息' }]
const state = reactive({ visible: false, activeTabs: 'main' })
// 表单数据
const formState = reactive({})
// 表单结构
const original = {
  id: '',
  column: {},
  title: '',
  thumb: '',
  author: '',
  summary: '',
  notes: '',
  idx: '',
  tags: ['手机', '配件'],
  status: [],
  createOn: '',
  createBy: ''
}
// 初始化数据
const { InitializeData } = useViewEvent({state: state, remoteFetchData: spuApi.getFormModelById, formState: formState, original: original })

// 向父组件暴露方法和属性
defineExpose({ InitializeData })

</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`查看文章`"
    placement="right"
    :width="'70%'"
  >
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card
      hoverable
      :tab-list="tabListNoTitle"
      :active-tab-key="noTitleKey"
      @tab-change="(key) => state.activeTabs = key"
    >
      <a-descriptions v-if="state.activeTabs == 'main'" :column="2" bordered>
        <a-descriptions-item label="标题" :span="2">{{ formState.title }}</a-descriptions-item>
        <a-descriptions-item label="栏目">{{ formState.column.label }}</a-descriptions-item>
        <a-descriptions-item label="作者">{{ formState.author }}</a-descriptions-item>
        <a-descriptions-item label="标签">{{ formState.tags }}</a-descriptions-item>
        <a-descriptions-item label="排序">{{ formState.idx }}</a-descriptions-item>
        <a-descriptions-item label="简介" :span="2">{{ formState.summary }}</a-descriptions-item>
        <a-descriptions-item label="备注">{{ formState.notes }}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="NormalStateColors[formState.state?.value]">{{ formState.state?.label }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间/人">{{ formState.createOn }}/ {{ formState.createBy }}</a-descriptions-item>
      </a-descriptions>
      <a-typography v-if="state.activeTabs == 'content'">
        <a-typography-title>{{ formState.title }}</a-typography-title>
        <a-typography-paragraph>
          {{ formState.summary }}
        </a-typography-paragraph>
      </a-typography>
    </a-card>
  </a-drawer>
</template>